// src/pages/Wu.jsx
import React, { useEffect, useState } from 'react';
import { NavBar, Card, Avatar, List, Skeleton, Button, Toast } from 'antd-mobile';
import { motion } from 'framer-motion';
import { useAuthStore } from '../store/authStore';
import { fadeIn } from '../styles/animations';
import UserInfo from '../components/UserInfo';
import MembershipRedeem from '../components/MembershipRedeem';
import StoreSelector from '../components/StoreSelector';
import { useNavigate } from 'react-router-dom';

const Wu = () => {
  const { logout, getUserInfo } = useAuthStore();
  const navigate = useNavigate();
  const [membershipModalVisible, setMembershipModalVisible] = useState(false);
  const [storeSelectorVisible, setStoreSelectorVisible] = useState(false);
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  // 获取用户信息
  const fetchUser = async () => {
    setLoading(true);
    try {
      const data = await getUserInfo();
      setUser(data);
    } catch (e) {
      setUser(null);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUser();
  }, []);

  const handleLogout = () => {
    logout();
    Toast.show({
      content: '已退出登录',
      position: 'center',
    });
  };

  const navigateToFavorites = () => {
    navigate('/favorites');
  };

  const navigateToBackpack = () => {
    if (user && user.email !== '1457310354@qq.com') {
      Toast.show({
        content: '敬请期待',
        position: 'center',
      });
      return;
    }
    setStoreSelectorVisible(true);
  };

  const openMembershipModal = () => {
    setMembershipModalVisible(true);
  };

  const closeMembershipModal = () => {
    setMembershipModalVisible(false);
  };

  const closeStoreSelector = () => {
    setStoreSelectorVisible(false);
  };

  const handleSelectStore = (store) => {
    navigate('/backpack', { state: { storeId: store.id } });
  };
  
  return (
    <motion.div 
      className="min-h-screen flex flex-col bg-gray-50"
      initial="hidden"
      animate="visible"
      exit="exit"
      variants={fadeIn}
      style={{
        width: '100%',
        height: '100vh',
        position: 'relative'
      }}
    >
      <div 
        className="flex-grow p-4"
        style={{
          padding: '0.4rem',
          paddingTop: '0.2rem',
          paddingBottom: '1.2rem'
        }}
      >
        {loading ? (
          <Card 
            className="mb-4"
            style={{
              marginBottom: '0.2rem',
              borderRadius: '0.2rem'
            }}
          >
            <Skeleton.Title animated />
            <Skeleton.Paragraph lineCount={5} animated />
          </Card>
        ) : user ? (
          <>
            <UserInfo />
            
            {/* 简化按钮设计 */}
            <div 
              className="mt-6 space-y-4"
              style={{
                marginTop: '0.2rem',
                position: 'relative'
              }}
            >
              {/* 通感倾慕按钮 */}
              <Button 
                block 
                size="mini"
                onClick={navigateToFavorites}
                style={{
                  height: '0.6rem',
                  fontSize: '0.28rem',
                  fontWeight: '500',
                  color: 'white',
                  backgroundColor: '#667eea',
                  border: 'none',
                  borderRadius: '0.2rem',
                  marginBottom: '0.2rem',
                  boxShadow: '0 0.04rem 0.12rem rgba(102, 126, 234, 0.3)'
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg 
                    style={{ width: '0.4rem', height: '0.4rem', marginRight: '0.2rem' }} 
                    fill="currentColor" 
                    viewBox="0 0 20 20"
                  >
                    <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd" />
                  </svg>
                  通感倾慕
                </span>
              </Button>

              {/* 积分商城按钮 */}
              <Button 
                block 
                size="mini"
                onClick={navigateToBackpack}
                style={{
                  height: '0.6rem',
                  fontSize: '0.28rem',
                  fontWeight: '500',
                  color: 'white',
                  backgroundColor: '#4facfe',
                  border: 'none',
                  borderRadius: '0.2rem',
                  marginBottom: '0.2rem',
                  boxShadow: '0 0.04rem 0.12rem rgba(79, 172, 254, 0.3)'
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg 
                    style={{ width: '0.4rem', height: '0.4rem', marginRight: '0.2rem' }} 
                    fill="currentColor" 
                    viewBox="0 0 20 20"
                  >
                    <path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" />
                  </svg>
                  积分兑换
                </span>
              </Button>

              {/* 会员兑换按钮 */}
              <Button 
                block 
                size="mini"
                onClick={openMembershipModal}
                style={{
                  height: '0.6rem',
                  fontSize: '0.28rem',
                  fontWeight: '500',
                  color: 'white',
                  backgroundColor: '#f093fb',
                  border: 'none',
                  borderRadius: '0.2rem',
                  marginBottom: '0.2rem',
                  boxShadow: '0 0.04rem 0.12rem rgba(240, 147, 251, 0.3)'
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg 
                    style={{ width: '0.4rem', height: '0.4rem', marginRight: '0.2rem' }} 
                    fill="currentColor" 
                    viewBox="0 0 20 20"
                  >
                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  会员兑换
                </span>
              </Button>

              {/* 退出登录按钮 */}
              <Button 
                block 
                size="mini"
                onClick={handleLogout}
                style={{
                  height: '0.6rem',
                  fontSize: '0.28rem',
                  fontWeight: '500',
                  color: 'white',
                  backgroundColor: '#ff6b6b',
                  border: 'none',
                  borderRadius: '0.2rem',
                  boxShadow: '0 0.04rem 0.12rem rgba(255, 107, 107, 0.3)'
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg 
                    style={{ width: '0.4rem', height: '0.4rem', marginRight: '0.2rem' }} 
                    fill="currentColor" 
                    viewBox="0 0 20 20"
                  >
                    <path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd" />
                  </svg>
                  退出登录
                </span>
              </Button>
            </div>

            {/* 会员兑换模态框 */}
            <MembershipRedeem 
              visible={membershipModalVisible}
              onClose={closeMembershipModal}
            />

            {/* 商户选择弹窗 */}
            <StoreSelector
              visible={storeSelectorVisible}
              onClose={closeStoreSelector}
              onSelectStore={handleSelectStore}
            />
          </>
        ) : (
          <Card 
            style={{
              borderRadius: '0.2rem',
              padding: '0.4rem'
            }}
          >
            <div 
              className="text-center p-4"
              style={{
                textAlign: 'center',
                padding: '0.2rem'
              }}
            >
              <p style={{ fontSize: '0.28rem', color: '#666' }}>加载用户数据失败</p>
              <Button 
                color="primary" 
                size="small" 
                onClick={fetchUser} 
                style={{
                  marginTop: '0.2rem',
                  fontSize: '0.28rem'
                }}
              >
                重新加载
              </Button>
            </div>
          </Card>
        )}
      </div>
    </motion.div>
  );
};

export default Wu;